<template>
  <div class="tabs">
    <div style="width: 500px">
      <a-radio-group
        v-model="tabPosition"
        style="margin: 8px"
        @change="callback"
      >
        <a-radio-button value="top"> top </a-radio-button>
        <a-radio-button value="bottom"> bottom </a-radio-button>
        <a-radio-button value="left"> left </a-radio-button>
        <a-radio-button value="right"> right </a-radio-button>
      </a-radio-group>
      <a-tabs
        :default-active-key="DefaultActiveKey"
        :tab-position="tabPosition"
        @change="callback"
      >
        <slot name="tabPane"></slot>
      </a-tabs>
    </div>
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      tabPosition: "left",
    };
  },
  methods: {
    callback(val) {
      // console.log(val.target.value);
      console.log(val);
      this.$emit("back", val);
    },
  },
  props: {
    DefaultActiveKey: {
      type: String,
      default: "1",
    },
  },
};
</script>